<template>
  <div>
    <h2>首页文章列表</h2>
    <ArticleCard
      v-for="article in posts"
      :key="article.id"
      :article="article"
    />
  </div>
</template>

<script setup lang="ts" name="Home">
import ArticleCard from '../../components/ArticleCard.vue'
import { ref, onMounted } from "vue";
import request from "../../utils/request";
import { ElMessage } from "element-plus";

const posts = ref([])
const loading = ref(false)
const total = ref(0)
const pageSize = ref(10)
const fetchArticles = async (page = 1) => {
  loading.value = true
  try {
    const res = await request.get("/api/posts/approved", {
      params: { page, pageSize: pageSize.value },
    })
    console.log("✅ 已通过文章列表:", res)
    if (res.code === 200) {
      posts.value = res.data.records || res.data
      total.value = res.data.total || res.data.length
    } else {
      ElMessage.warning(res.message || "加载失败")
    }
  } catch (err) {
    console.error(err)
    ElMessage.error("加载失败，请稍后重试")
  } finally {
    loading.value = false
  }
}
onMounted(() => {
  fetchArticles(); // 页面挂载时自动加载第一页文章
});

</script>

<style scoped>
h2 {
  margin-bottom: 20px;
}
</style>
